.page-doc {
  .links {
    .col {
      display: flex;
      padding: $spring-8points 0;
      .item {
        display: block;
        flex: 280px 0;
        margin-left: $spring-8points * 2;
        padding: $spring-8points * 3;
        text-align: center;
        position: relative;
        padding-bottom: $spring-8points * 5.5;
      }
      a.item {
        background: $spring-gray-color;
        cursor: pointer;
        @include effect-box(1.02, $spring-transition-duration);
        h2 {
          margin: 0;
          padding: 0;
          font-size: 18px;
          color: $spring-color;
        }
        div {
          padding: $spring-8points * 1 0;
          color: #666;
          margin: 0 auto;
          max-width: 260px;
        }
        span.read-me {
          position: absolute;
          display: block;
          left: 0;
          right: 0;
          bottom: 20px;
          text-decoration: none;
        }
        &:hover {
          text-decoration: none;
          .read-me {
            text-decoration: underline;
          }
        }
      }
    }
  }
  .layout-col {
    display: flex;
    padding: $spring-8points * 4 $spring-8points * 2;
    //max-width: 1400px;
    //margin: 0 auto;
    .left {
      flex: 300px 0;
      padding-right: 120px;
      border-right: 1px solid lighten($spring-border-color, 10);
    }

    .links {
      flex: 1;
    }
  }

  .page-title {
    p {
      color: #666;
    }
  }
}
